<script setup>
import { ref } from 'vue';
import { useAppUserStore } from '@/stores';
import { appUserSetInfoService } from '@/apis/appuser';

import { Plus } from '@element-plus/icons-vue';

const formRef = ref();

// 是在使用仓库中数据的初始值 (无需响应式) 解构无问题
const {
  userInfo: { id, userName, realName, email, phone, headImage },
  getUserInfo
} = useAppUserStore();

const headImageUrl = ref(headImage);

const formModel = ref({
  id,
  userName,
  realName,
  email,
  phone,
  headImage: null
});

const rules = ref({
  realName: [
    {
      pattern: /^\S{2,10}/,
      message: '真实姓名长度需要在2-10个非空字符',
      trigger: 'blur'
    }
  ],
  email: [
    {
      type: 'email',
      message: '请输入正确的邮箱格式',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      pattern: /^\d{11}/,
      message: '手机号需要为 11 位数字',
      trigger: 'blur'
    }
  ]
});

// 头像相关
const uploadRef = ref();
const onSelectFile = (uploadFile) => {
  headImageUrl.value = URL.createObjectURL(uploadFile.raw);
  formModel.value.headImage = uploadFile.raw;
};

const submitForm = async () => {
  // 等待校验结果
  await formRef.value.validate();
  // 提交修改
  await appUserSetInfoService(formModel.value);
  // 通知 user 模块，进行数据的更新
  getUserInfo();
  // 提示用户
  ElMessage.success('修改成功');
};
</script>

<template>
  <page-container title="基本资料">
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="登录名称">
        <el-input v-model="formModel.userName" disabled></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="formModel.realName"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="formModel.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formModel.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-upload
          ref="uploadRef"
          :auto-upload="false"
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="onSelectFile"
        >
          <img v-if="headImageUrl" :src="headImageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
